<template>
  <div class="main-wrapper">
    <el-form :model="form" :rules="formRules" ref="formData">
      <StepTitle :index="1" title="协议主体" />
      <div class="panel">
        <el-row>
          <el-col :span="12">
            <el-form-item label="协议客户" prop="agreementCustomer" style="margin-left: -10px">
              <el-select v-model="form.agreementCustomer" placeholder="选择客户">
                <el-option
                  v-for="(item, index) in agreementCustomers"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <span class="agreement-customer">
                {{ selectedCustomer }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="协议状态">
              <el-select v-model="form.agreementStatus" placeholder="选择状态">
                <el-option
                  v-for="(item, index) in agreementStatusList"
                  :key="index"
                  :label="item.status"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="购进指标">
              <el-select v-model="form.agreementTarget" placeholder="金额">
                <el-option
                  v-for="(item, index) in agreementTargetList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <span class="gray-input" v-if="form.agreementTarget === 0">
                <el-input class="customPrice" placeholder="输入金额数量">
                  {{ form.agreementTargetNumber }}
                </el-input>
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纯销指标">
              <el-select v-model="form.pureSaleTarget" placeholder="金额">
                <el-option
                  v-for="(item, index) in pureSaleTargetList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <span class="gray-input" v-if="form.pureSaleTarget === 0">
                <el-input class="customPrice" placeholder="输入金额数量">
                  {{ form.pureSaleTargetNumber }}
                </el-input>
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="选择区域">
              <el-select v-model="form.region" multiple placeholder="选择区域">
                <el-option
                  v-for="(item, index) in regionList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <!-- <p>
                                    <span>全国</span>
                                </p> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签订时间">
              <el-date-picker v-model="form.signingDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="购进渠道">
              <el-select v-model="form.purchaseChannel" placeholder="金额">
                <el-option
                  v-for="(item, index) in purchaseChannelList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-button class="change-channel">请选择渠道</el-button>
              <!-- <el-input class="customPrice" placeholder="请选择渠道">{{form.purchaseChannels}}</el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-table :data="purchaseChannelData" class="channel">
            <el-table-column prop="number" label="指定渠道编码"></el-table-column>
            <el-table-column prop="name" label="指定渠道名称"></el-table-column>
            <el-table-column prop="province" label="所在省"></el-table-column>
          </el-table>
        </el-row>
      </div>
      <StepTitle :index="2" title="产品政策" />
      <div class="product-policy-wrapper">
        <el-form-item>
          <el-row class="add-product">
            <el-col :span="2"><el-button type="primary" @click="addProduct()">添加产品</el-button></el-col>
            <el-col :span="5">
              <span>购进总指标（万元）: ¥152.65</span>
            </el-col>
            <el-col :span="12">
              <span>指标按季度分解（万元）: 【Q1】¥12.5 【Q2】¥12.5 【Q3】¥12.5 【Q4】¥12.5</span>
            </el-col>
            <el-col :span="4">
              <span>纯销总指标（万元）: ¥152.65</span>
            </el-col>
          </el-row>
          <div class="panel" v-for="(product, index) in form.productList" :key="index">
            <ProductItem :value="product" @remove="removeProduct(index)" />
          </div>
        </el-form-item>
      </div>
      <StepTitle :index="3" title="补充协议" style="margin-top: -10px" />
      <SupplementaryAgreement @change="changeAgreements" />
      <el-row class="panel">
        <el-button type="primary" @click="saveFormData">保存</el-button>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import StepTitle from '@/components/StepTitle.vue';
import ProductItem from '@/views/annualAgreementManagement/secondarySupplierAgreement/components/ProductItem.vue';
import SupplementaryAgreement from '@/views/annualAgreementManagement/secondarySupplierAgreement/components/SupplementaryAgreement.vue';

export default {
  name: 'CreateSecondarySupplierAgreement',
  data() {
    return {
      agreementCustomers: [
        {
          value: 0,
          label: '上海正也医药有限公司',
        },
        {
          value: 1,
          label: '北京正也医药有限公司',
        },
      ],
      agreementStatusList: [
        { value: 0, status: '正常' },
        { value: 1, status: '失败' },
      ],
      agreementTargetList: [
        {
          value: 0,
          label: '金额',
        },
        {
          value: 1,
          label: '数额',
        },
      ],
      pureSaleTargetList: [
        {
          value: 0,
          label: '金额',
        },
        {
          value: 1,
          label: '数额',
        },
      ],
      regionList: [
        {
          value: 0,
          label: '全国',
        },
        {
          value: 1,
          label: '上海',
        },
        {
          value: 2,
          label: '北京',
        },
      ],
      purchaseChannelList: [
        {
          value: 0,
          label: '指定渠道',
        },
        {
          value: 1,
          label: '供应商',
        },
      ],
      purchaseChannelData: [
        {
          number: 'BJ000090',
          name: '宁波九州通药业有限公司',
          province: '浙江省',
        },
        {
          number: 'BJ000192',
          name: '国药控股精华有限公司',
          province: '浙江省',
        },
        {
          number: 'BJ000283',
          name: '老百姓药业有限公司',
          province: '浙江省',
        },
      ],
      form: {
        agreementCustomer: '',
        agreementStatus: '',
        agreementTarget: 0,
        agreementTargetNumber: '',
        pureSaleTarget: 0,
        pureSaleTargetNumber: '',
        region: ['全国'],
        signingDate: '2022-12-01 12:00:00',
        purchaseChannel: 0,
        purchaseChannels: [],
        productList: [],
        agreements: [],
      },
      formRules: {
        agreementCustomer: {
          required: true,
          message: '请选择协议客户',
          trigger: ['change', 'blur'],
        },
      },
    };
  },
  computed: {
    selectedCustomer() {
      return this.agreementCustomers.find(v => v.value === this.form.agreementCustomer)?.label ?? '';
    },
  },
  components: {
    StepTitle, // 标题组件
    ProductItem, // 产品政策组件
    SupplementaryAgreement, // 补充协议组件
  },
  created() {
    this.addProduct();
  },
  methods: {
    changeAgreements(newValue) {
      this.form.agreements = newValue;
    },
    /**
     * 保存数据
     */
    saveFormData() {},
    /**
     * 添加产品
     */
    addProduct() {
      this.form.productList.push({
        termOfAgreement: '',
        checkedProduct: '',
        agreementPrice: '',
        ticketDiscountPrice: '',
        purchaseIndexScalarBig: '',
        purchaseIndexScalarSmall: '',
        purchaseMoney: '',
        saleScalarSmall: '',
        saleScalarMoney: '',
        distributionIncentives: '',
        distributionIncentivesCost: '',
        retailDistribution: '',
        retailDistributionCost: '',
        medicalDistributor: '',
        medicalDistributorCost: '',
        customOne: '',
        customTwo: '',
      });
    },
    /**
     * 删除产品
     */
    removeProduct(index) {
      if (this.form.productList.length <= 1) {
        this.$message('产品配置至少保留一个哦');
        return;
      }
      this.form.productList.splice(index, 1);
    },
  },
};
</script>
<style>
.el-select .el-input .el-select__caret {
  color: #4e8dff !important;
  font-weight: 700 !important;
}
.el-table th {
  background: #f8f8f8 !important;
}
.el-table::before {
  background-color: transparent !important;
}
.el-select .el-tag__close.el-icon-close {
  background-color: #4e8dff !important;
}
.el-tag--info {
  color: #4e8dff !important;
}
.main-wrapper {
  padding: 0 30px;
}
.panel {
  background: #fff;
  padding: 15px 30px;
  border-radius: 5px;
}
.agreement-customer {
  margin-left: 15px;
  color: #bcbabb;
}
.customPrice {
  width: 300px;
  margin-left: 10px;
}
.channel {
  width: 90%;
  margin-left: 60px;
}
.change-channel {
  margin-left: 10px;
}
.gray-input .el-input__inner {
  background: #f8f8f8 !important;
}
</style>
